<h3>Project</h3>
<div class="container">
  <p-table #dt [columns]="selectedColumns" [paginator]="true" [resizableColumns]="true" [rows]="10" [responsive]="true" [value]="dataSource">
    <ng-template pTemplate="caption">
      <div class="row">
        <div class="col">
            <p-button  (click)="onAddEntity()" label="Create" styleClass="ui-button-primary" iconPos="left" icon="fa fa-plus"></p-button>
            <p-button  (click)="onReload()" label="{{'Reload'|translate}}" styleClass="ui-button-primary" iconPos="left" icon="fa fa-refresh"></p-button>
        </div>
        <div class="col">
          <p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header" selectedItemsLabel="{0} columns selected"
            [style]="{minWidth: '200px'}" defaultLabel="Choose Columns"></p-multiSelect>
        </div>
        <div class="col">
            
          <input type="text" pInputText size="20" (input)="dt.filterGlobal($event.target.value, 'contains')"
            style="width:auto">
            <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
        </div>
      </div>
    </ng-template>
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th *ngFor="let col of columns" pResizableColumn [pSortableColumn]="col.field">
          {{col.header}}
          <p-sortIcon [field]="col.field"></p-sortIcon>
        </th>
        <th></th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns" class="ui-resizable-column">
      <tr>
        <td *ngFor="let col of columns">
          {{rowData[col.field]}}
        </td>
        <td>
            <p-button pTooltip="Edit" (click)="onEditRow(rowData)" styleClass="ui-button-primary" iconPos="left" icon="fa fa-pencil-square-o"></p-button>
            <p-button pTooltip="View" (click)="onViewRow(rowData)" styleClass="ui-button-primary" iconPos="left" icon="fa fa-eye"></p-button>
            <p-button pTooltip="Delete"  (click)="onDeleteRow(rowData)" styleClass="ui-button-danger" iconPos="left" icon="fa fa-trash"></p-button>
        </td>
      </tr>
    </ng-template>

  </p-table>
</div>

<p-growl [(value)]="msgs" ></p-growl>